<template>
  <div class="main">
    <van-tabs v-model="active" @click="tab">
      <van-tab :title="item.title" v-for="item in list" :key="item._id" :name="item._id"></van-tab>
    </van-tabs>

    <van-card v-for="item in shoplist" :key="item._id" :price="item.price" :title="item.title" :thumb="item.pic">
      <template #footer>
        <van-icon name="shopping-cart-o" size="20px" @click="add(item)" />
      </template>

    </van-card>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: '59f1e1ada1da8b15d42234e9',
        list: [],
        shoplist: []
      }
    },
    methods: {
      tab(val) {
        // console.log(this.active);
        this.$axios.get('/list.json').then((result) => {
          // console.log(result);
          this.shoplist = result.data.result.filter(item => {
            return item.cid == val
          })
        }).catch((err) => {
          console.log(err);
        });
      },

      add(item){
        this.$store.commit('add',item)
      }
    },
    mounted() {
      this.tab(this.active)
      this.$axios.get('/fenlei.json').then((result) => {
        // console.log(result);
        this.list = result.data.result
      }).catch((err) => {
        console.log(err);
      });
    },
  }
</script>
<style lang="scss">
  .main{
    flex: 1;
    overflow: scroll;
  }
</style>